import React from 'react';
import CourseSelect from "./CourseSelect";
import ReduxForm from "./ReduxForm";
import ReduxApp from "../redux/redux-app";

class ReactFrom extends React.Component {
    constructor() {
        super();
    }
    state={
        timers:[],
        name:'',
        names:[],
        fields:{
            name:'',
            email:''
        },
        fieldErrors:{},
        people:[]
    }
    onAgree=(evt)=>{
        const btn = evt.target;
        console.log(`button name:${btn.name}, value: ${btn.value}`);
    }

    deAgree=(evt)=>{
        const btn = evt.target;
        console.log(`button name:${btn.name}, value: ${btn.value}`);
    }
    onButtonClick=(evt)=>{
        const btn = evt.target;
        console.log(`button name:${btn.name}, value: ${btn.value}`);
    }
    onFormSubmit=(evt)=>{
        evt.preventDefault();
        console.log(evt)
        if (this.state.name!=""){
            //受控组件
            const names=[...this.state.names,this.state.name]
            this.setState({
                names: names,
                name:''
            })
        }else if(this.refs.name.value!=''){
            //非受控组件
            const names=[...this.state.names,this.refs.name.value]
            this.setState({
                names: names
            })
            console.log(this.refs.name.value)
            this.refs.name.value=''
        }else if(this.state.fields){
            const person = this.state.fields;
            console.log("person",person)
            const errors= this.validate(person);
            this.setState({fieldErrors:errors});
            if (Object.keys(errors).length){
                return;
            }

            const people = [...this.state.people,person];
            console.log("his.state.fields",this.state.fields,people)
            this.setState({
                fields:{
                    name:'',
                    email:''
                },
                people:people
            })
            console.log(this.state.people)
        }

    }
    onNameChange=(evt)=>{
        this.setState({name:evt.target.value})
        console.log(evt.target.value)
    }
    onInputChange=(evt)=>{
        const fields = Object.assign({},this.state.fields)
        fields[evt.target.name]=evt.target.value;
        this.setState({fields})
    }

    validate=person=>{
        const errors={};
        if (!person.name) errors.name='名称必须填写！';
        if(!person.email) errors.email = '邮件必填！';
        // if (person.email && !isEmail(person.email)) errors.email="邮件格式非法！";
        console.log("errors.....",person,errors);
        return errors;
    }
    handleCourseSelectChange=(evt)=>{
        console.log(evt)
    }

    handleReduxFormSubmit=(evt)=>{
        const timers = [...this.state.timers,evt];
        console.log("timers....",timers)
        this.setState({
            timers:timers
        })
        console.log("handleReduxFormSubmit.....",evt,this.state.timers)
    }

    render() {
        return(
            <div>
                <h1>表单</h1>
                {/*<ReduxApp></ReduxApp>*/}
                {/*<ReduxForm isLoading={false} saveStatus={'READY'} onSubmit={this.handleReduxFormSubmit}></ReduxForm>*/}

                <div>
                    <ul>
                        {
                            this.state.timers.map(({title,project},i)=>{
                                return( <li key={i}>{title} ({project})</li>)
                            })
                        }
                    </ul>
                </div>
                <form onSubmit={this.onFormSubmit}>
                    <CourseSelect onChange={this.handleCourseSelectChange}></CourseSelect>

                    <input ref="name" placeholder="非受控组件"/>
                    <input placeholder="受控组件" value={this.state.name} onChange={this.onNameChange}/>

                    <div>
                        <ul>
                            { this.state.names.map((name)=>{
                                return(<li>{name}</li>)
                            })}
                        </ul>
                    </div>
                    <input name="name" placeholder="用户姓名" value={this.state.fields.name} onChange={this.onInputChange}/>
                    <span style={{color:'red'}}>{this.state.fieldErrors.name}</span>
                    <input name="email" placeholder="用户邮件" value={this.state.fields.email} onChange={this.onInputChange}/>
                    <span style={{color:'red'}}>{this.state.fieldErrors.email}</span>
                    <div>
                        {
                            this.state.people.map(({name,email},i)=>{
                              return( <li key={i}>{name} ({email})</li>)
                            })
                        }
                    </div>
                    <input type="submit"/>
                    <br/>
                    <button name="button1" value="同意" onClick={this.onButtonClick}>同意</button>
                    <button name="button2" value="反对" onClick={this.onButtonClick}>反对</button>

                    <br/>

                </form>
            </div>
        )
    }
}

export  default ReactFrom;